import React, { Component } from 'react';
import { routerRedux, Route, Switch, Link } from 'dva/router';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
    Button, Menu, Dropdown, Icon, Row, Col,
    Input, InputNumber,
    Steps, Card, Popover, Badge, Table, Tooltip, Divider,
    Checkbox, Modal, Radio,Collapse,
    Select, message,
    Form, Upload, Spin, DatePicker
} from 'antd';
import moment from 'moment';
import classNames from 'classnames';
import DescriptionList from '../../components/DescriptionList';
import ChannelProductEditor from '../../components/Falcon/ChannelProductEditor';
import { create } from 'domain';
import querystring from 'querystring';


const { Step } = Steps;
const TextArea = Input.TextArea;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const FormItem = Form.Item;
const Panel = Collapse.Panel;


@connect(({ channel }) => ({
    channel,
}))
@Form.create()
export default class ChannelProductDetailsUpdata extends Component {
    state = {
        channelId: '',
    }

    componentDidMount() {
        const { dispatch, location } = this.props;
        const params = querystring.parse(location.search.slice(1));
        this.setState({
            channelId: params.id,
        })
    }

    nextStep = () => {
        //this.props.dispatch(routerRedux.push('/channel/channel-form/pay'));
        const { dispatch } = this.props;

        const form = this.formRef.props.form;
        form.validateFields((err, values) => {
          if (err) {
            return;
          }
          console.log('Received values of form: ', values);
          form.resetFields();
          //this.setState({ visible: false });
          const {channel:{ channelProductDiviList, channelProductList, channelLoading} } = this.props;
          console.log('channelProductList nextStep',channelProductList);
          
        //   this.props.dispatch(routerRedux.push(`/channel/channel-details?id=${1}&state=1`));

        //   dispatch({
        //       type: 'channel/channelProductdetailsUpdata',
        //       payload:{
        //         // id: this.state.channelId,
        //         // ...channelProductList,
        //       },
        //       callback:() => {

        //       }
        //   })
          
        });
    }

    saveFormRef = (formRef) => {
        this.formRef = formRef;
      }

    render() {
        const { channel } = this.props;

        const { getFieldDecorator, getFieldValue, validateFieldsAndScroll } = this.props.form;
        const formItemLayout = {
            labelCol: {
                span: 6,
            },
            wrapperCol: {
                span: 16,
            },
        };

        return (
            <Card title="渠道产品信息修改">
            <Row >
                 <ChannelProductEditor state={4} wrappedComponentRef={this.saveFormRef}/>
                <Row>
                    <Col span={24} style={{ marginLeft: '20%' }}>
                        <FormItem
                            wrapperCol={{
                                xs: { span: 24, offset: 0 },
                                sm: {
                                    span: formItemLayout.wrapperCol.span,
                                    offset: formItemLayout.labelCol.span,
                                },
                            }}
                            label=""
                        >
                        <div style={{marginTop: '40px'}}>
                            <Button onClick={this.nextStep} type="primary" >
                                提交
                            </Button>
                        </div>
                        </FormItem>
                    </Col>
                </Row>
                
            </Row>
        </Card>
        );
    }
}
